import Link from 'next/link'
import { useEffect } from 'react'
import { withRouter } from 'next/router'
import { request } from "../lib/api";
import Repo from './Repo'
import { get, cache } from '../lib/repo-basic-cache'



function makeQuery (queryObj) {
  const query = Object.entries(queryObj)
    .reduce((result, entry) => {
      result.push(entry.join('='))
      return result
    }, [])
    .join('&')
  return `?${query}`
}

const isServer = typeof window === 'undefined'

export default function (Comp, type = "index") {
  function WithDetail ({ repoBasic, router, ...rest }) {
    const query = makeQuery(router.query)

    useEffect(() => {
      if (!isServer) cache(repoBasic)
    })

    return (
      <div className="root">
        <div className="repo-basic">
          <Repo repo={repoBasic} />
          <div className="tabs">
            {
              type === 'index' ? (
                <span className="tab">Readme</span>
              ) : (
                  <Link href={`/detail/${query}`}>
                    <a className="tab index">Readme</a>
                  </Link>
                )
            }
            {
              type === 'issues' ? (
                <span className="tab">issues</span>
              ) : (
                  <Link href={`/detail/issues/${query}`}>
                    <a className="tab issues">issues</a>
                  </Link>
                )
            }


          </div>
        </div>
        <div>
          <Comp {...rest} />
        </div>
        <style jsx>{`
          .root{
            padding:20px;
           }
          .repo-basic {
            padding: 20px;
            border: 1px solid #eee;
            margin-bottom: 20px;
            border-radius: 5px;
          }
          .tab + .issues{
            margin-left:20px;
          }
          `}</style>
      </div>
    )
  }
  WithDetail.getInitialProps = async (context) => {
    const { router, ctx } = context
    const { owner, name } = ctx.query
    const full_name = `${owner}/${name}`


    let pageData = {}
    if (Comp.getInitialProps) {
      pageData = await Comp.getInitialProps(ctx)
    }
    if (get(full_name)) {
      return {
        repoBasic: get(full_name),
        ...pageData
      }
    }
    const repoBasic = await request({ url: `/repos/${owner}/${name}` }, ctx.req, ctx.res)
    //const repoBasic = await axios.get(`https://api.github.com/repos/${owner}/${name}`)



    return {

      repoBasic: repoBasic.data,
      ...pageData
    }
  }
  return withRouter(WithDetail)
}
